<template>
    <div class="SportTable">
        <div class="SportTableLeft">
            <div class="TableMenu">
                <div class="TableMenuListTitle">
                    课程分类 <i class="ivu-icon ivu-icon-ios-plus-outline" @click="addNewCategory"></i>
                </div>
                <div class="side-all">
                    <span @click="showTreeList">
                        <Icon v-show="this.showList" style="width: 10px;" type="arrow-down-b"></Icon>
                    </span>
                    <span @click="showTreeList">
                        <Icon v-show="!this.showList" style="width: 10px;" type="arrow-right-b"></Icon>
                    </span>
                    <span @click="getAllCourseList" :class="{'selectedItem': selectAll}" >全部</span>
                </div>
                <div class="TableMenuTree" slot="content" v-show="this.showList">
                    <div class="TableMenuList">
                        <ul v-for="(item, index) in sportTableMenuList">
                            <li class="CategoryName" :class="{'selectedItem': item.categoryStyle}" @click="choseCategory(index)">{{ item.categoryName }}</li>
                            <li class="CategoryEdit"><a @click="editCategoryMethod(index, value)"><Icon type="edit"></Icon></a></li>
                            <li class="CategoryDelete"><a @click="deleteCategory(index)"><Icon type="ios-trash-outline"></Icon></a></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <div class="SportTableRight">
            <!-- 搜索框 -->
            <div class="selectTable" style="margin:0px 100px 10px 0;">
                <div class="SearchItem">
                    <div class="itemName">
                        <span>课程名称：</span>
                        <Input v-model="searchContent" placeholder="请输入课程名称" style="width:180px" :maxlength='20' @on-change="search" @on-keyup="searchKeyUp" @on-enter="selectByItem"></Input>
                    </div>
                    <div>
                        <span>课程标签：</span>
                        <Select  v-model="searchTag" style="width:200px">
                            <Option v-for="item in this.$store.state.courseTag" :value="item.tag" :key="item.tag" @on-change="categorySelect()">{{ item.tag }}</Option>
                        </Select>
                    </div>
                </div>
            </div>
             <!-- 搜索按钮 -->
            <Row >
                <div style="float:left;">
                    <Button type="primary" style="margin-left:5px" @click="addNewCourseList" class="selectBox">新增</Button>
                    <Button type="primary" style="margin-left:5px" @click="sortCoursList" class="selectBox">排序</Button>
                </div>
                <div style="float:right;">
                    <Button type="primary" style="margin-left:5px" @click="selectByItem" class="selectBox">搜索</Button>
                    <Button type="primary" style="margin-left:5px" @click.native="clearItem" class="selectBox">清空</Button>
                </div>
            </Row>
            <!-- 列表 -->
            <Row class="sportTableContent">
                <Table border :columns="SportTableColumns" :data="sportTableData" :loading="loading" width="100%"></Table>
            </Row>
            <br>
            <!-- 页码 -->
            <Row style="text-align: right;margin:35px 0;">
                <Page :total="totalPageNum" :current="current" show-total show-sizer show-elevator :page-size="sportPageSize" @on-page-size-change="changePageSize" @on-change="changePage"></Page>
            </Row>
            <!-- 新增课程信息弹窗 -->
            <Modal title="新增" v-model="isAddCourseList" @on-ok="submitCourseList" @on-cancel="cancelPopWindow" :mask-closable="false"  :loading="editValid">
                <table>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>序号：</span>
                        </td>
                        <td>
                            <Input v-model="edit_orderNum" :maxlength='6' style="width: 200px" placeholder="请输入序号"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程分类：</span>
                        </td>
                        <td>
                            <Select v-model="edit_category" style="width:200px">
                                <Option v-for="item in this.$store.state.allCategoryList" :value="item.categoryName" :key="item.categoryName" :on-change="categorySelect(value)"></Option>
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程名称：</span>
                        </td>
                        <td>
                            <Input v-model="edit_courseName" :maxlength='10' placeholder="请输入课程名称" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程简介：</span>
                        </td>
                        <td>
                            <Input v-model="edit_course_desc" :maxlength='20' placeholder="请输入课程简介" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课时：</span>
                        </td>
                        <td>
                            <Input v-model="edit_lesson_period" :maxlength='6' placeholder="请输入课时" style="width: 200px"></Input><span  style="color:#d2d2d2" class="beizhu">（请填写单位）</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>价格：</span>
                        </td>
                        <td>
                            <Input v-model="edit_price" :maxlength='6' placeholder="请输入价格" style="width: 200px"></Input><span style="color:#d2d2d2" class="beizhu">（请填写单位）</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程标签：</span>
                        </td>
                        <td>
                            <Select v-model="edit_course_tag" style="width:200px">
                                <Option v-for="item in tagList" :value="item.tag" :key="item.tag" @on-change="categorySelect()"></Option>
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>详情链接：</span>
                        </td>
                        <td>
                            <Input v-model="edit_detail_link" @on-enter="submitCourseList" :maxlength='50' placeholder="请输入详情链接" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>封面图片：</span>
                        </td>
                        <td>
                            <!-- <Input v-model="value" placeholder="请输入详情链接" style="width: 200px"></Input> -->
                            <div>
                                <div class="demo-upload-list" v-for="item in uploadList">
                                    <img :src="item.url">
                                    <div class="demo-upload-list-cover">
                                        <Icon color="#ff5500" type="close-circled" @click.native="handleRemove(item)"></Icon>
                                    </div>
                                </div>
                                <Upload 
                                ref="upload"  
                                :show-upload-list="false" 
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']" 
                                :max-size="5120" 
                                :before-upload="handleBeforeUpload" 
                                :on-format-error="handleFormatError" 
                                :on-exceeded-size="handleMaxSize" 
                                :on-progress="onProgress" 
                                type="drag" 
                                :action="uploadUrl" 
                                style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:37px;line-height: 58px;">
                                        <div><Icon type="plus-round" size="20"></Icon></div>
                                    </div>
                                    <div style="font-size:13px;">上传</div>
                                </Upload>
                                <div>(建议上传大小为100×100的图片)</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </Modal>
            <!-- 编辑课程信息弹窗 -->
            <Modal title="编辑" v-model="editMsg"  @on-ok="submitEditCourseList" @on-cancel="cancelPopWindow" :mask-closable="false"  :loading="editValid">
                <table>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>序号：</span>
                        </td>
                        <td>
                            <Input v-model="edit_orderNum" :maxlength='6' style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程分类：</span>
                        </td>
                        <td>
                            <Select v-model="edit_category" @on-change="categoryChange" style="width:200px">
                                <Option v-for="item in this.$store.state.allCategoryList" :value="item.categoryName" :key="item.categoryName">{{ item.categoryName }}</Option>
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程名称：</span>
                        </td>
                        <td>
                            <Input v-model="edit_courseName" :maxlength='10' placeholder="请输入课程名称" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程简介：</span>
                        </td>
                        <td>
                            <Input v-model="edit_course_desc" :maxlength='20' placeholder="请输入课程简介" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课时：</span>
                        </td>
                        <td>
                            <Input v-model="edit_lesson_period" :maxlength='6' placeholder="请输入课时" style="width: 200px"></Input><span style="color:#d2d2d2">（请填写单位）</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>价格：</span>
                        </td>
                        <td>
                            <Input v-model="edit_price" :maxlength='6' placeholder="请输入价格" style="width: 200px"></Input><span style="color:#d2d2d2">（请填写单位）</span>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>课程标签：</span>
                        </td>
                        <td>
                            <Select v-model="edit_course_tag" style="width:200px">
                                <Option v-for="item in tagList" :value="item.tag" :on-change="categorySelect(value)" :key="item.tag">{{ item.tag }}</Option>
                            </Select>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>详情链接：</span>
                        </td>
                        <td>
                            <Input v-model="edit_detail_link" :maxlength='50' placeholder="请输入详情链接" style="width: 200px"></Input>
                        </td>
                    </tr>
                    <tr>
                        <td class="add-left">
                            <span style="color:red">*</span>
                            <span>封面图片：</span>
                        </td>
                        <td>
                            <div>
                                <div class="demo-upload-list" v-for="item in uploadList">
                                    <img :src="item.url">
                                    <div class="demo-upload-list-cover">
                                        <Icon color="#ff5500" type="close-circled" @click.native="handleRemove(item)"></Icon>
                                    </div>
                                </div>
                                <Upload 
                                ref="upload" 
                                v-model="edit_picUrl" 
                                :show-upload-list="false" 
                                :on-success="handleSuccess"
                                :format="['jpg','jpeg','png']" 
                                :max-size="5120" 
                                :before-upload="handleBeforeUpload" 
                                :on-format-error="handleFormatError" 
                                :on-exceeded-size="handleMaxSize"
                                :on-progress="onProgress" 
                                type="drag" 
                                :action="uploadUrl" 
                                style="display: inline-block;width:58px;">
                                    <div style="width: 58px;height:37px;line-height: 58px;">
                                        <div><Icon type="plus-round" size="20"></Icon></div>
                                    </div>
                                    <div style="font-size:13px;">上传</div>
                                </Upload>
                                <div>(建议上传大小为100×100的图片)</div>
                            </div>
                        </td>
                    </tr>
                </table>
            </Modal>
            <!-- 新增课程分类 弹窗 -->
            <Modal title="新增课程分类" v-model="addCategory" @on-ok="submitNewCategory" okText="确认" :mask-closable="false"  :loading="editCategoryValid">
                <table>
                    <tr>
                        <td class="add-left">
                            <span>分类名称：</span>
                        </td>
                        <td>
                            <Input v-model="cateName"  placeholder="请输入分类名称" :maxlength="4" style="width:180px" autofocus @on-enter="submitNewCategory"></Input>
                        </td>
                    </tr>
                </table>
            </Modal>
            <!-- 编辑课程分类 弹窗-->
            <Modal title="编辑课程分类" v-model="editCategory" @on-ok="submitCategory" okText="确认" :mask-closable="false"  :loading="editCategoryValid">
                <table>
                    <tr>
                        <td class="add-left">
                            <span>分类名称：</span>
                        </td>
                        <td>
                            <Input v-model="cateName" :maxlength='4' placeholder="请输入分类名称" style="width:180px" autofocus @on-enter="submitCategory"></Input>
                        </td>
                    </tr>
                </table>
            </Modal>
            <!-- 课程排序 -->
            <Modal v-model="sortShufflingList" :mask-closable="false" title="排序(请使用鼠标拖动排序)" @on-ok="submitSortCourse" @on-cancel="cancel">
                <div class="sortContent">
                    <div class="sortTitle"><div>标题</div><div>序号</div></div>
                    <draggable v-model="sortCourseList" :options="{draggable:'.item'}" class="drag">
                        <div v-for="element in sortCourseList" :key="element.id" class="item">
                            <div>{{element.courseName}}</div>
                            <div>{{element.courseNum}}</div>
                        </div>
                    </draggable>
                </div>
            </Modal>
        </div>
    </div>
</template>

<script>
export default {
    name: 'sportTable',
    created() {
        const Vm = this
        Vm.uploadUrl = Vm.$store.state.uploadUrl
        Vm.uploadList = []
        // 初始化页面标签显示状态
        Vm.$store.commit('SET_shufflingPage', false)
        Vm.$store.commit('SET_sportPage', true)
        // this.searchTag = Vm.$store.state.courseTag[0].tag
        // 获取所有课程分类列表
        async function setAllCategoryList() {
            let list = await Vm.$store.dispatch('getAllCategorie')
            console.log(list)
            if (list.data.status === 1000) {
                console.log(11)
                Vm.$store.commit('SET_allCategoryList', list.data.result)
                console.table(Vm.$store.state.allCategoryList[0])
                Vm.$store.commit('SET_currentCategory', Vm.$store.state.allCategoryList[0].categoryName)
            } else {
                Vm.$store.commit('SET_allCategoryList', 'no data')
            }
        }
        // 执行步骤
        async function setp() {
            await setAllCategoryList()
            // await setCurrentCategory()
            await Vm.getCourseList()
        }
        setp()
        // this.tagList = this.$store.state.courseTag
        // this.tagList.shift()
    },
    data() {
        return {
            editMsg: false,
            editCategory: false,
            addCategory: false,
            isAddCourseList: false,
            loading: false,
            isSearch: false,
            isUpload: false,
            // 用于控制文件导入按钮 默认点击次数被6次
            uploadButtonClickedCounter: 0,
            isUploadMessage: true,
            loadingStatus: false,
            placeCodeLength: false,
            checkNumber: false,
            showList: true,
            selectAll: false,
            searchButtoncliked: 0,
            // 详细显示页面切换 公司界面和搜索界面
            isCategoryPage: true,
            durationTime: 5,
            kdIndex: 0,
            cateName: '',
            searchTag: '全部',
            edit_orderNum: '',
            edit_category: '',
            edit_courseName: '',
            edit_course_desc: '',
            searchContent: '',
            edit_lesson_period: '',
            edit_price: '',
            edit_course_tag: '',
            edit_detail_link: '',
            edit_picUrl: '',
            edit_course_id: '',
            uploadList: [],
            uploadUrl: '',
            // tagList: [],
            value: '',
            tempCateName: '',
            // 用于弹窗输入校验
            editValid: true,
            editCategoryValid: true,
            sortShufflingList: false,
        }
    },
    computed: {
        current() {
            try {
                return this.$store.state.page
            } catch (Error) {
            }
        },
        sportPageSize() {
            return this.$store.state.pageSize
        },
        SportTableColumns() {
            return [
                {
                    title: '序号',
                    align: 'center',
                    key: 'OREDER_NUMBER',
                    width: '90px'
                },
                {
                    title: '课程名称',
                    align: 'center',
                    key: 'COURSE_NAME',
                },
                {
                    title: '课程简介',
                    align: 'center',
                    key: 'COURSE_DESCRIPTION',
                    // ellipsis: true,
                    className: 'descStyle'
                },
                {
                    title: '课时',
                    align: 'center',
                    key: 'LESSON_PERIOD',
                },
                {
                    title: '价格',
                    align: 'center',
                    key: 'PRICE',
                },
                {
                    title: '课程标签',
                    align: 'center',
                    key: 'COURSE_LABLE',
                    // width: '85px'
                },
                {
                    title: '详情链接',
                    align: 'center',
                    width: '200px',
                    key: 'DETAILS_LINK',
                },
                {
                    title: '操作',
                    key: '11',
                    align: 'center',
                    width: '120px',
                    render: (h, params) => {
                        return h('div', [
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            console.log(params)
                                            this.editMsgMethods(params)
                                        }
                                    }
                                },
                                '编辑'
                            ),
                            h(
                                'a',
                                {
                                    props: {
                                        type: 'text',
                                        size: 'small',
                                    },
                                    on: {
                                        click: () => {
                                            this.deleteCourseMsg(params)
                                        }
                                    }
                                },
                                '删除'
                            )
                        ])
                    }
                }
            ]
        },
        // 菜单栏 所有课程分类列表
        sportTableMenuList() {
            const Vm = this
            try {
                let tempObj = []
                Vm.$store.state.allCategoryList.map((item) => {
                    let style = null
                    if (item.categoryName === Vm.$store.state.currentCategory) {
                        style = true
                    } else {
                        style = false
                    }
                    let a = {
                        categoryId: item.categoryId,
                        categoryName: item.categoryName,
                        categoryStyle: style
                    }
                    tempObj.push(a)
                })
                return tempObj
            } catch (err) {
                // console.log(err)
                return []
            }
        },
        sportTableData() {
            try {
                let temp = []
                this.$store.state.courseList.map((item) => {
                    let a = {
                        OREDER_NUMBER: item.courseNum,
                        COURSE_NAME: item.courseName,
                        COURSE_DESCRIPTION: item.courseDesc,
                        LESSON_PERIOD: item.courseTime,
                        PRICE: item.coursePrice,
                        COURSE_LABLE: item.courseTag,
                        DETAILS_LINK: item.detailUrl,
                        PIC_URL: item.picUrl,
                        COURSE_ID: item.courseId,
                        CATEGORY: item.categoryName
                    }
                    temp.push(a)
                })
                return temp
            } catch (err) {
                return []
            }
        },
        totalPageNum() {
            try {
                return this.$store.state.totalPage
            } catch (Error) {
            }
        },
        sortCourseList: {
            get() {
                return this.$store.state.sortCourseList
            },
            set(value) {
                console.log('value', value)
                this.$store.commit('SET_sortCourseList', value)
            }
        },
        tagList() {
            try {
                let temObj = []
                this.$store.state.courseTag.map((item, index) => {
                    if (item.tag !== '全部') {
                        let a = {
                            tag: item.tag
                        }
                        temObj.push(a)
                    }
                })
                return temObj
            } catch (res) {}
        }
    },
    methods: {
        // ----- 上传组件方法开始 ------
        handleBeforeUpload(file) {
            // 创建一个 FileReader 对象
            let reader = new FileReader()
            // readAsDataURL 方法用于读取指定 Blob 或 File 的内容
            // 当读操作完成，readyState 变为 DONE，loadend 被触发，此时 result 属性包含数据：URL（以 base64 编码的字符串表示文件的数据）
            // 读取文件作为 URL 可访问地址
            reader.readAsDataURL(file)
            const _this = this
            const check = this.uploadList.length < 1
            if (!check) {
                this.$Message.warning({
                    content: '单次只能上传一张图片.'
                })
            } else {
                reader.onloadend = function(e) {
                    file.url = reader.result
                    _this.uploadList.push(file)
                    console.log(_this.uploadList)
                }
            }
            return check
        },
        changePageSize(sportPageSize) {
            this.$store.commit('SET_pageSize', sportPageSize)
            this.getCourseList()
        },
        handleRemove(file) {
            this.uploadList.splice(this.uploadList.indexOf(file), 1)
            this.uploadList = []
            this.edit_picUrl = ''
        },
        handleSuccess(response) {
            const Vm = this
            if (response.status === 1000) {
                // console.log('llllll-----', response.status)
                Vm.edit_picUrl = response.result
                // Vm.editNotice('info', 3, response.msg)
                // console.log('this.edit_picUrl-----', Vm.edit_picUrl)
                this.$Loading.finish()
            } else {
                Vm.$Message.warning({
                    content: response.msg,
                    duration: this.durationTime
                })
            }
        },
        handleFormatError(file) {
            console.log(file)
            let Vm = this
            Vm.$Message.warning({
                content: '文件格式不正确，请上传 jpg 或 png 格式的图片',
                duration: Vm.durationTime
            })
            setTimeout(() => {
                Vm.uploadList = []
            }, 1500)
        },
        handleMaxSize(file) {
            this.$Message.warning({
                content: '文件大小应小于5M',
                duration: this.durationTime
            })
        },
        onProgress() {
            this.$Loading.start({
                color: '#5cb85c',
                failedColor: '#f0ad4e',
                height: 5
            })
        },
        // 加载条
        isLoading() {
            const msg = this.$Message.loading({
                content: '加载中...',
                duration: 0
            })
            setTimeout(msg, 3000)
        },
        doUpload() {
            this.$refs.upload.$el.firstChild.click()
        },
        uploadButton() {
            this.isUpload = true
            this.isUploadMessage = true
            this.uploadButtonClickedCounter = 0
        },
        // ------ 上传组件方法结束 -------
        sortCoursList() {
            const Vm = this
            // this.$store.commit('SET_sortCourseList', this.$store.state.courseList)
            if (!Vm.selectAll) {
                // console.log(Vm.$store.state.sortList)
                Vm.$store.dispatch('getCourseListByCondition', {
                    categoryName: Vm.$store.state.currentCategory,
                    courseName: '',
                    courseTag: '',
                    pageNum: Vm.$store.state.page,
                    pageSize: 100000
                })
                    .then(res => {
                        console.log(res)
                        Vm.$store.commit('SET_sortCourseList', res.data.result)
                        // Vm.$store.commit('SET_pageSize', 100000)
                    })
                Vm.sortShufflingList = true
            } else {
                Vm.editNotice('error', 3, '请选择具体分类进行排序')
            }
        },
        search() {
            this.isSearch = true
            this.isCategoryPage = false
            this.searchButtoncliked = 0
            this.$store.commit('SET_page', 1)
        },
        categoryChange(value) {
            console.log('------sv--', value)
        },
        searchKeyUp() {
            if (this.searchContent.length === 0) {
                this.isCategoryPage = true
                // this.editNotice('error', 3, '请输入课程名称')
            }
        },
        onChangeman() {
        },
        onChange(val) {
            console.log(val)
        },
        // 取消编辑和新增 弹窗事件
        cancelPopWindow() {
            this.$Loading.finish()
            // 重置所有临时变量  防止其他使用这些值得组件受影响
            this.edit_orderNum = ''
            this.edit_category = ''
            this.edit_courseName = ''
            this.edit_course_desc = ''
            this.edit_lesson_period = ''
            this.edit_price = ''
            this.edit_course_tag = ''
            this.edit_detail_link = ''
            this.edit_picUrl = ''
            this.uploadList = []
        },
        categorySelect(value) {
            // this.edit_category = value
        },
        // 提交新增的公司
        addNewCategory() {
            this.cateName = ''
            this.addCategory = true
        },
        // 添加新的课程
        addNewCourseList() {
            this.edit_course_tag = this.tagList[0].tag
            if (this.$store.state.currentCategory === '') {
                // this.$store.commit('SET_currentCategory', this.$store.state.allCategoryList[0].categoryName)
                this.edit_category = this.$store.state.allCategoryList[0].categoryName
            } else {
                this.edit_category = this.$store.state.currentCategory
            }
            // console.log('ccccccc---', this.edit_category)
            this.isAddCourseList = true
        },
        // 点击课程分类  选中课程分类 并刷新课程表
        choseCategory(params) {
            // console.log(params)
            this.selectAll = false
            this.$store.commit('SET_currentCategory', this.$store.state.allCategoryList[params].categoryName)
            if (this.isCategoryPage) {
                this.getCourseList()
            } else {
                this.selectByItem()
            }
        },
        // 删除一条课程表记录
        deleteCourseMsg(params) {
            const Vm = this
            Vm.$store.commit('SET_tempCourseListId', params.row)
            Vm.$Modal.confirm({
                content: '<b>是否删除该条信息？</b>',
                onOk: () => {
                    // 要修改的
                    Vm.sportTableData.splice(params.index, 1)
                    console.log(111)
                    try {
                        Vm.$store.dispatch('deleteCourseList', {
                            courseId: Vm.$store.state.tempCourseListId,
                        })
                        .then(res => {
                            if (res.data.status === 1000) {
                                Vm.$Message.info({
                                    content: res.data.msg,
                                    duration: this.durationTime
                                })
                                if (Vm.isCategoryPage) {
                                    Vm.getCourseList()
                                } else {
                                    Vm.selectByItem()
                                }
                            } else {
                                Vm.$Modal.confirm({
                                    content: '<b>删除失败</b>'
                                })
                            }
                        })
                    } catch (err) {
                        return []
                    }
                },
                onCancel: () => {
                }
            })
        },
        // 删除一条课程分类记录
        deleteCategory(params) {
            const Vm = this
            Vm.$store.commit('SET_tempCategoryId_ByDel', params)
            Vm.$Modal.confirm({
                content: '<b>是否删除该课程分类？</b>',
                onOk: () => {
                    // 要修改的
                    // Vm.sportTableMenuList.splice(params, 1)
                    try {
                        Vm.$store.dispatch('deleteCategoryById', {
                            categoryId: Vm.$store.state.tempCategoryId,
                        })
                        .then(res => {
                            console.log('res', res)
                            if (res.data.status === 1000) {
                                Vm.$Message.info({
                                    content: res.data.msg,
                                    duration: Vm.durationTime
                                })
                                console.log(12)
                                // 刷新列表
                                Vm.$store.dispatch('getAllCategorie')
                                .then(res => {
                                    if (res.data.status === 1000) {
                                        // 设置为课程分类列表第一条记录得值
                                        Vm.getCategorieList()
                                    }
                                    Vm.getCourseList()
                                })
                            } else {
                                Vm.$Message.error({
                                    content: res.data.msg,
                                    duration: Vm.durationTime
                                })
                            }
                        })
                    } catch (err) {
                        return []
                    }
                },
                onCancel: () => {
                }
            })
        },
        editCategoryMethod(index, value) {
            console.log(index, value)
            this.kdIndex = index
            this.$store.commit('SET_tempCategoryId', {
                index: this.kdIndex
            })
            // this.edit_category = this.$store.state.tempCategoryName
            this.cateName = this.$store.state.tempCategoryName
            this.tempCateName = this.$store.state.tempCategoryName
            this.editCategory = true
        },
        clearItem() {
            this.searchContent = ''
            this.searchTag = '全部'
            this.$store.commit('SET_page', 1)
            this.isCategoryPage = true
            this.getCourseList()
        },
        selectByItem() {
            const Vm = this
            // 统计按钮点击次数
            Vm.searchButtoncliked ++
            // 去掉空格
            Vm.searchContent = Vm.searchContent.replace(/(^\s+)|(\s+$)/g, '')
            let tag = ''
            if (Vm.searchTag === '全部') {
                tag = ''
            } else {
                tag = Vm.searchTag
            }
            if (Vm.searchContent !== '' || Vm.searchTag !== '') {
                Vm.$store.dispatch('getCourseListByCondition', {
                    categoryName: Vm.$store.state.currentCategory,
                    courseName: Vm.searchContent,
                    courseTag: tag,
                    pageNum: Vm.$store.state.page,
                    pageSize: Vm.$store.state.pageSize
                })
                .then(res => {
                    if (res.data.status === 1000) {
                        Vm.$store.commit('SET_courseList', res.data.result)
                        // Vm.$store.commit('SET_sortCourseList', res.data.result)
                        Vm.$store.commit('SET_totalPage', res.data.total)
                        Vm.$store.commit('SET_page', Vm.$store.state.page)
                        // 关闭搜索按钮
                        this.isSearch = false
                    } else {
                        Vm.$store.commit('SET_courseList', 'no data')
                        // if (Vm.searchButtoncliked < 3) {
                        //     Vm.$Message.info({
                        //         content: res.data.msg,
                        //         duration: Vm.durationTime
                        //     })
                        // }
                        Vm.$store.commit('SET_totalPage', 0)
                        Vm.$store.commit('SET_page', 1)
                    }
                })
            } else {
            }
        },
        changePage(current) {
            if (this.isCategoryPage) {
                this.$store.commit('SET_page', current)
                this.getCourseList()
            } else {
                this.$store.commit('SET_page', current)
                this.selectByItem()
            }
        },
        checkOrderNumber() {
            const Vm = this
            console.log(this.edit_orderNum)
            console.log(Vm.$store.state.currentCategory)
            Vm.$store.dispatch('courseNewNum', {
                categoryName: Vm.$store.state.currentCategory,
                courseNum: this.edit_orderNum
            }).then(res => {
                if (res.data.status === 1000) {
                    Vm.checkNumber = true
                } else {
                    Vm.checkNumber = false
                    Vm.editNotice('error', 5, res.data.msg)
                }
            })
        },
        // 修改 课程信息
        editMsgMethods(params) {
            console.log('edit info', params)
            this.edit_orderNum = params.row.OREDER_NUMBER
            this.edit_category = params.row.CATEGORY
            this.edit_courseName = params.row.COURSE_NAME
            this.edit_course_desc = params.row.COURSE_DESCRIPTION
            this.edit_lesson_period = params.row.LESSON_PERIOD
            this.edit_price = params.row.PRICE
            this.edit_course_tag = params.row.COURSE_LABLE
            this.edit_detail_link = params.row.DETAILS_LINK
            this.edit_picUrl = params.row.PIC_URL
            this.edit_course_id = params.row.COURSE_ID
            this.uploadList.push({
                url: params.row.PIC_URL
            })
            this.edit_courseId = params.row.COURSE_ID
            this.$store.commit('SET_editCourseMsg', params.row)
            this.editMsg = true
        },
        // 提交 修改的课程信息
        submitEditCourseList() {
            const Vm = this
            // let doAction = false
            Vm.$store.commit('SET_currentCategory', Vm.edit_category)
            let reg = /^[0-9]*[1-9][0-9]*$/
            let reg2 = /^[a-zA-Z]+$/
            // let regUrl = /^(?:http(?:s|):\/\/|)(?:(?:\w*?)\.|)(?:\w*?)\.(?:\w{2,4})(?:\?.*|\/.*|)$/ig
            let regUrl = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
            let isNM = reg2.test(Vm.edit_orderNum)
            // 去除空格
            Vm.edit_courseName = Vm.edit_courseName.replace(/(^\s*)|(\s*$)/g, '')
            Vm.edit_course_desc = Vm.edit_course_desc.replace(/(^\s*)|(\s*$)/g, '')
            Vm.edit_price = Vm.edit_price.replace(/(^\s*)|(\s*$)/g, '')
            Vm.edit_lesson_period = Vm.edit_lesson_period.replace(/(^\s*)|(\s*$)/g, '')
            if (Vm.edit_orderNum === '') {
                Vm.editNotice('error', 3, '序号不能为空')
                setTimeout(() => {
                    Vm.editValid = false
                    Vm.$nextTick(() => {
                        Vm.editValid = true
                    }, 1000)
                })
            } else if (!reg.test(Vm.edit_orderNum) || isNM) {
                Vm.editNotice('error', 3, '序号请输入整数数字')
                setTimeout(() => {
                    Vm.editValid = false
                    Vm.$nextTick(() => {
                        Vm.editValid = true
                    }, 1000)
                })
            } else {
                Vm.$store.dispatch('courseEditNum', {
                    categoryName: Vm.$store.state.currentCategory,
                    courseId: Vm.edit_course_id,
                    courseNum: Vm.edit_orderNum
                }).then(res => {
                    console.log('111122--', res)
                    if (res.data.status === 1000) {
                        Vm.checkNumber = true
                        if (Vm.edit_orderNum === '') {
                            Vm.editNotice('error', 3, '序号不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (!reg.test(Vm.edit_orderNum) || isNM) {
                            Vm.editNotice('error', 3, '序号请输入整数数字')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_courseName === '') {
                            Vm.editNotice('error', 3, '课程名称不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_course_desc === '') {
                            Vm.editNotice('error', 3, '课程简介不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_lesson_period === '') {
                            Vm.editNotice('error', 3, '课时不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_price === '') {
                            Vm.editNotice('error', 3, '价格不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_course_tag === '') {
                            Vm.editNotice('error', 3, '价格不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_detail_link === '') {
                            Vm.editNotice('error', 3, '详情链接不能为空')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (!regUrl.test(Vm.edit_detail_link)) {
                            Vm.editNotice('error', 3, '详情链接应该以http或https开头，如http://www.xxx.xxx')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_picUrl === '') {
                            Vm.editNotice('error', 3, '请上传图片')
                            setTimeout(() => {
                                this.editValid = false
                                this.$nextTick(() => {
                                    this.editValid = true
                                }, 1000)
                            })
                        } else {
                            doAction()
                        }
                    } else {
                        // Vm.checkNumber = false
                        Vm.editNotice('error', 3, '已有此序号')
                    }
                })
            }
            console.log(Vm.checkNumber)
            setTimeout(() => {
                this.editValid = false
                this.$nextTick(() => {
                    this.editValid = true
                }, 1000)
            })
            function doAction() {
                console.log(Vm.edit_picUrl)
                let tempPath = Vm.edit_picUrl.substr(Vm.edit_picUrl.indexOf('/upload'), Vm.edit_picUrl.length)
                console.log(tempPath)
                Vm.$store.dispatch('updateCourse', {
                    categoryName: Vm.edit_category,
                    courseName: Vm.edit_courseName,
                    courseNum: Vm.edit_orderNum,
                    courseDesc: Vm.edit_course_desc,
                    courseTime: Vm.edit_lesson_period,
                    coursePrice: Vm.edit_price,
                    courseTag: Vm.edit_course_tag,
                    detailUrl: Vm.edit_detail_link,
                    picUrl: tempPath,
                    courseId: Vm.edit_courseId,
                })
                .then(res => {
                    if (res.data.status === 1000) {
                        if (Vm.isCategoryPage) {
                            Vm.getCourseList()
                        } else {
                            Vm.selectByItem()
                        }
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: Vm.durationTime
                        })
                    } else {
                        // Vm.getCourseList()
                        Vm.$Message.error({
                            content: res.data.msg,
                            duration: Vm.durationTime
                        })
                    }
                    Vm.editCategory = false
                    console.log('天空', Vm.uploadList)
                    Vm.uploadList = []
                    // 初始化
                    Vm.edit_category = ''
                    Vm.edit_courseName = ''
                    Vm.edit_orderNum = ''
                    Vm.edit_course_desc = ''
                    Vm.edit_lesson_period = ''
                    Vm.edit_price = ''
                    Vm.edit_course_tag = ''
                    Vm.edit_detail_link = ''
                    Vm.edit_picUrl = ''
                    Vm.edit_courseId = ''
                    Vm.editMsg = false
                    Vm.checkNumber = false
                })
            }
        },
        // 提交新增的课程信息
        submitCourseList() {
            const Vm = this
            console.log('this edit', Vm.edit_category)
            Vm.$store.commit('SET_currentCategory', Vm.edit_category)
            // let doAction = false
            let reg = /^[0-9]*[1-9][0-9]*$/
            let reg2 = /^[a-zA-Z]+$/
            // let regUrl = /^(?:http(?:s|):\/\/|)(?:(?:\w*?)\.|)(?:\w*?)\.(?:\w{2,4})(?:\?.*|\/.*|)$/ig
            let regUrl = /(https?|ftp|file):\/\/[-A-Za-z0-9+&@#/%?=~_|!:,.;]+[-A-Za-z0-9+&@#/%=~_|]/
            let isNM = reg2.test(Vm.edit_orderNum)
            if (Vm.edit_orderNum === '') {
                Vm.editNotice('error', 3, '序号不能为空')
                setTimeout(() => {
                    Vm.editValid = false
                    Vm.$nextTick(() => {
                        Vm.editValid = true
                    }, 1000)
                })
            } else if (!reg.test(Vm.edit_orderNum) || isNM) {
                Vm.editNotice('error', 3, '序号请输入整数数字')
                setTimeout(() => {
                    Vm.editValid = false
                    Vm.$nextTick(() => {
                        Vm.editValid = true
                    }, 1000)
                })
            } else {
                Vm.$store.dispatch('courseNewNum', {
                    categoryName: Vm.$store.state.currentCategory,
                    courseNum: this.edit_orderNum
                }).then(res => {
                    if (res.data.status === 1000) {
                        if (Vm.edit_orderNum === '') {
                            Vm.editNotice('error', 3, '序号不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (!reg.test(Vm.edit_orderNum) || isNM) {
                            Vm.editNotice('error', 3, '序号请输入整数数字')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_courseName === '') {
                            Vm.editNotice('error', 3, '课程名称不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_course_desc === '') {
                            Vm.editNotice('error', 3, '课程简介不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_lesson_period === '') {
                            Vm.editNotice('error', 3, '课时不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_price === '') {
                            Vm.editNotice('error', 3, '价格不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_course_tag === '') {
                            Vm.editNotice('error', 3, '价格不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_detail_link === '') {
                            Vm.editNotice('error', 3, '详情链接不能为空')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (!regUrl.test(Vm.edit_detail_link)) {
                            Vm.editNotice('error', 3, '详情链接应该以http或https开头，如http://www.xxx.xxx')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else if (Vm.edit_picUrl === '') {
                            Vm.editNotice('error', 3, '请上传图片')
                            setTimeout(() => {
                                Vm.editValid = false
                                Vm.$nextTick(() => {
                                    Vm.editValid = true
                                }, 1000)
                            })
                        } else {
                            submit()
                        }
                    } else {
                        Vm.editNotice('error', 3, '已有此序号')
                    }
                })
            }
            setTimeout(() => {
                Vm.editValid = false
                Vm.$nextTick(() => {
                    Vm.editValid = true
                }, 1000)
            })
            async function submit() {
                // if (Vm.edit_course_tag === '全部') {
                //     Vm.edit_course_tag = '无'
                // }
                Vm.$store.dispatch('addCourse', {
                    categoryName: Vm.edit_category,
                    courseName: Vm.edit_courseName,
                    courseNum: Vm.edit_orderNum,
                    courseDesc: Vm.edit_course_desc,
                    courseTime: Vm.edit_lesson_period,
                    coursePrice: Vm.edit_price,
                    courseTag: Vm.edit_course_tag,
                    detailUrl: Vm.edit_detail_link,
                    picUrl: Vm.edit_picUrl,
                    // picUrl: 'Vm.edit_picUrl',
                })
                .then(res => {
                    if (res.data.status === 1000) {
                        Vm.getCourseList()
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: Vm.durationTime
                        })
                    } else {
                        Vm.getCourseList()
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: Vm.durationTime
                        })
                    }
                    Vm.uploadList = []
                    // console.log('llllllllll-------', this.uploadList)
                    // 初始化公用临时变量
                    Vm.edit_orderNum = ''
                    Vm.edit_category = []
                    Vm.edit_courseName = ''
                    Vm.edit_course_desc = ''
                    Vm.edit_lesson_period = ''
                    Vm.edit_price = ''
                    Vm.edit_course_tag = []
                    Vm.edit_detail_link = ''
                    Vm.edit_picUrl = ''
                    Vm.isAddCourseList = false
                    Vm.checkNumber = false
                })
            }
            // if (doAction) {
            //     submit()
            // }
            setTimeout(() => {
                this.editCategoryValid = false
                this.$nextTick(() => {
                    this.editCategoryValid = true
                }, 1000)
            })
        },
        // 提交修改的课程分类信息
        submitCategory() {
            const self = this
            console.log(self.edit_category)
            self.cateName = self.cateName.replace(/(^\s*)|(\s*$)/g, '')
            // let doSubmit = false
            if (self.cateName === '') {
                // alert(111)
                console.log('课程分类不能为空')
                self.editNotice('error', 5, '课程分类不能为空')
                setTimeout(() => {
                    self.editCategoryValid = false
                    self.$nextTick(() => {
                        self.editCategoryValid = true
                    }, 1000)
                })
            } else {
                self.$store.commit('SET_currentCategory', self.cateName)
                // doSubmit = true
                self.$store.dispatch('updateCategory', {
                    categoryId: self.$store.state.tempCategoryId,
                    categoryName: self.cateName
                })
                .then(res => {
                    if (res.data.status === 1000) {
                        self.editCategory = false
                        // to-do 修改成功 刷新列表
                        self.getCategorieList()
                        self.getCourseList()
                        self.$Message.info({
                            content: res.data.msg,
                            duration: self.durationTime
                        })
                        setTimeout(() => {
                            this.editCategoryValid = false
                            this.$nextTick(() => {
                                this.editCategoryValid = true
                            }, 1000)
                        })
                        self.cateName = ''
                        self.editCategory = false
                        self.editCategoryValid = false
                        self.getCategorieList()
                    } else {
                        self.$Message.info({
                            content: res.data.msg,
                            duration: self.durationTime
                        })
                        setTimeout(() => {
                            this.editCategoryValid = false
                            this.$nextTick(() => {
                                this.editCategoryValid = true
                            }, 1000)
                        })
                        // self.editCategory = false
                    }
                })
            }
            let a = {
                categoryId: self.$store.state.tempCategoryId,
                categoryName: self.cateName
            }
            console.log(a)
        },
        // 提交新增的课程分类信息
        submitNewCategory() {
            const Vm = this
            console.log('you are function')
            console.log(this.cateName)
            let doSubmit = false
            if (Vm.cateName === '') {
                Vm.editNotice('error', 5, '课程分类不能为空')
                setTimeout(() => {
                    this.editCategoryValid = false
                    this.$nextTick(() => {
                        this.editCategoryValid = true
                    }, 1000)
                })
            } else {
                doSubmit = true
            }
            if (doSubmit) {
                this.$store.dispatch('addCategory', {
                    categoryName: this.cateName
                })
                .then(res => {
                    console.log('you are function')
                    if (res.data.status === 1000) {
                        this.addCategory = false
                        this.$Message.info({
                            content: res.data.msg,
                            duration: this.durationTime,
                        })
                        console.log(11)
                        this.getCategorieList()
                        this.cateName = ''
                    } else {
                        this.$Message.error({
                            content: res.data.msg,
                            duration: this.durationTime
                        })
                        setTimeout(() => {
                            this.editCategoryValid = false
                            this.$nextTick(() => {
                                this.editCategoryValid = true
                            }, 1000)
                        })
                    }
                    setTimeout(() => {
                        this.editCategoryValid = false
                        this.$nextTick(() => {
                            this.editCategoryValid = true
                        }, 1000)
                    })
                    // console.log(res)
                })
            }
        },
        // 获取课程分类列表
        getCategorieList() {
            const Vm = this
            async function setCategorieList() {
                let list = await Vm.$store.dispatch('getAllCategorie')
                console.log('----list', list.data.result)
                if (list.data.status === 1000) {
                    Vm.$store.commit('SET_allCategoryList', list.data.result)
                } else {
                    Vm.$store.commit('SET_allCategoryList', 'no data')
                }
            }
            setCategorieList()
        },
        // 获取所有课程列表
        getAllCourseList() {
            this.selectAll = true
            this.$store.commit('SET_currentCategory', '')
            this.edit_category = this.$store.state.allCategoryList[0].categoryName
            if (this.isCategoryPage) {
                this.getCourseList()
            } else {
                this.selectByItem()
            }
            // this.selectAll = false
        },
        submitSortCourse() {
            const Vm = this
            console.log('ssot', this.$store.state.sortCourseList)
            let tempObj = []
            let sortCourseList = {sort: [], pageNum: '', pageSize: '', courseName: '', categoryName: '', courseTag: ''}
            try {
                Vm.$store.state.sortCourseList.map((item, index) => {
                    let a = {
                        key: item.courseId,
                        value: item.courseNum,
                    }
                    tempObj.push(a)
                })
            } catch (err) {}
            sortCourseList.sort = tempObj
            sortCourseList.pageNum = Vm.$store.state.page
            sortCourseList.pageSize = Vm.$store.state.pageSize
            sortCourseList.categoryName = Vm.$store.state.currentCategory
            sortCourseList.courseName = ''
            sortCourseList.courseTag = ''
            console.log('subcolist', sortCourseList)
            Vm.$store.dispatch('sortCourse', sortCourseList)
                .then(res => {
                    if (res.data.status === 1000) {
                        Vm.$Message.info({
                            content: res.data.msg,
                            duration: 3
                        })
                        Vm.getCourseList()
                    } else {
                        Vm.$Message.error({
                            content: res.data.msg,
                            duration: 3
                        })
                    }
                })
        },
        cancel() {
            // this.uploadList = ''
        },
        // 刷新课程表
        getCourseList() {
            const Vm = this
            // 加载进度 打开
            Vm.loading = true
            let tag = ''
            if (Vm.$store.state.currentCategory !== '') {
                this.selectAll = false
            }
            async function setCourseList() {
                if (Vm.searchTag === '全部') {
                    tag = ''
                } else {
                    tag = Vm.searchTag
                }
                let list = await Vm.$store.dispatch('getCourseListByCondition', {
                    categoryName: Vm.$store.state.currentCategory,
                    courseName: Vm.searchContent,
                    courseTag: tag,
                    pageNum: Vm.$store.state.page,
                    pageSize: Vm.$store.state.pageSize
                })
                console.log('course list', list)
                // 加载进度 关闭
                Vm.loading = false
                if (list.data.status === 1000) {
                    Vm.$store.commit('SET_courseList', list.data.result)
                    // Vm.$store.commit('SET_sortCourseList', list.data.result)
                    Vm.$store.commit('SET_page', Vm.$store.state.page)
                    Vm.$store.commit('SET_totalPage', list.data.total)
                    console.log(list.data.result)
                    // Vm.selectAll = false
                } else {
                    Vm.$store.commit('SET_courseList', '')
                    Vm.$store.commit('SET_totalPage', 0)
                }
            }
            setCourseList()
        },
        handleSpinCustom() {
            this.$Spin.show()
            setTimeout(() => {
                this.$Spin.hide()
            }, 3000)
        },
         // 用户Message信息提示函数
        editNotice(type, time, content) {
            switch (type) {
            case 'info':
                this.$Message.info({
                    content: content,
                    duration: time
                })
                break
            case 'error':
                this.$Message.error({
                    content: content,
                    duration: time
                })
                break
            case 'success':
                this.$Message.success({
                    content: content,
                    duration: time
                })
                break
            }
        },
        // ---this project
        // submitCategory() {
        // }
        showTreeList() {
            this.showList = !this.showList
        }
    },
    mounted() {
        this.uploadList = this.$refs.upload.fileList
        // this.tagList = this.$store.state.courseTag
        // this.tagList.shift()
        // console.log('tagList', this.tagList)
    }
}
</script>

<style lang="less">
@SportTableLeftWidth: 230px;
@TableMenuWidth: 230px;
.SportTable {
    min-width: 1000px;
    display: flex;
    // display: inline-block;
    box-sizing: border-box;
    // height: 100%;
    .SportTableLeft {
        width: @SportTableLeftWidth;
        height: 600px;
        cursor: pointer;
        -webkit-user-select:none;
        -moz-user-select:none;
        -ms-user-select:none;
        user-select:none;
        // float: left;
        display: inline-block;
        .TableMenu {
            width: @TableMenuWidth;
            height: 100%;
            border: 1px solid #999999;
            opacity:1;
            border-radius: 5px;
            .TableMenuListTitle {
                height: 30px;
                line-height: 30px;
                margin: 0 auto;
                margin-top: 3px;
                text-align: center;
                border: 1px solid #999999;
                opacity:1;
                width: 98%;
                cursor: pointer;
                border-radius: 5px;
                i {
                    float: right;
                    height: 30px;
                    margin-right: 10px;
                    font-size: 17px;
                    margin-top: 5px;
                }
            }
            .TableMenuTree {
                margin-top: 10px;
                margin-left: 15px;
                height: 80%;
                max-height: 80%;
                overflow-y: auto;
                .TableMenuTreeTitle {
                    margin-left: -15px;
                    span:nth-child(2) {
                        margin-left: 5px;
                    }
                }
                .TableMenuList {
                    overflow-y: auto;
                    overflow-x: hidden;
                    margin-top: 15px;
                    margin-left: 10px;
                    ul {
                        width: 100%;
                        height: 25px;
                        display: flex;
                        li {
                            width:100%;
                            a {
                                color: #999999;
                                font-size: 16px;
                            }
                        }
                        margin-left: 20px;
                        .CategoryName {
                            width: 120px;
                        }
                        .CategoryEdit {
                            margin-right: 5px;
                            width: 20px;
                        }
                        .CategoryDelete {
                            margin-right: 0px;
                            width: 20px;
                        }
                    }
                }
            }
        }
    }
    .SportTableRight {
        // width: 80%;
        width: calc(~'100% - @{SportTableLeftWidth} - 25px');
        height: 100%;
        margin-left: 25px;
        display: inline-block;
        // float: left;
        .selectTable {
            display: flex;
            align-items: center;
            justify-content: flex-start;
            flex-wrap: wrap;
            width: 100%;
            .SearchItem {
                display:flex;
                align-items: center;
                // margin: 20px 50px 20px 0;
                width: 1000px;
                .itemName {
                    margin-right: 40px;
                }
            }
        }
        .selectBox {
            margin-bottom: 15px;
        }
        // .sportTableContent {
        //     // height: 79%;
        //     // width: 1200px;
        // }
    }
}
.selectedItem {
    color: #2d8cf0;
}
.beizhu {
    color: #d2d2d2;
}
.add-left {
    text-align: right;
    width: 100px;
    height: 40px;
}
.side-all {
    margin-top: 15px;
    margin-left: 30px;
}
.ivu-icon-arrow-down-b:before {
    margin-right: 5px;
    margin-left: 0px !important;
}
.demo-upload-list {
    display: inline-block;
    width: 60px;
    height: 60px;
    text-align: center;
    line-height: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    // overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
    margin-right: 4px;
}

.demo-upload-list img {
    width: 100%;
    height: 100%;
}

.demo-upload-list-cover {
    // display: none;
    display: block;
    position: absolute;
    top: -20px;
    // bottom: 0;
    // left: 0;
    right: -6px;
    // background: rgba(0, 0, 0, .6);
}

// .demo-upload-list:hover .demo-upload-list-cover {
//     display: block;
// }

.demo-upload-list-cover i {
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    margin: 0 2px;
}
.sortContent {
    width: 100%;
    // background: orange;
    .sortTitle {
        width: 100%;
        height: 30px;
        display: flex;
        flex-direction: columnl;
        line-height: 30px;
        font-weight: 600;
        // margin-bottom: 10px;
        div {
            // display: flex;
            // flex-direction: row;
            text-align: center;
            width: 50%;
        }
    }
    .drag {
        // background: papayawhip;
        width: 100%;
        height: 400px;
        overflow-y: auto;
        .item {
            width: 100%;
            display: flex;
            height: 25px;
            flex-direction: columnl;
            overflow-y: auto;
            div {
                text-align: center;
                width: 50%;
                line-height: 25px;
            }
        }
        .item:hover {
            background: #ddd;
        }
    }
}
// .descStyle {
//     overflow:hidden; 
//     -webkit-line-clamp:2; 
//     text-overflow:ellipsis;
// }
</style>
